@import "~scss/variables";

$sw-media-field-font-size-label: $font-size-xs;
$sw-media-field-color-label: $color-darkgray-200;
$sw-media-field-border-radius-input: $border-radius-default;
$sw-media-field-border-color-input: $color-gray-300;
$sw-media-field-border-color-input-active: $color-shopware-brand-500;
$sw-media-field-border-radius-picker: $border-radius-default;
$sw-media-field-border-color-picker: $color-gray-300;
$sw-media-field-background-color-picker: $color-white;
$sw-media-field-background-color-list-item-hover: $color-shopware-brand-50;
$sw-media-field-color-picker-toggle: $color-shopware-brand-500;
$sw-media-field-color-unlink: $color-crimson-500;

.sw-media-field {
    position: relative;
    width: 100%;
    margin-bottom: 22px;

    .sw-media-field__label {
        display: block;
        font-size: $sw-media-field-font-size-label;
        color: $sw-media-field-color-label;
        margin-bottom: 8px;
        line-height: 16px;
        font-weight: normal;
        user-select: none;
    }

    .sw-media-field__input-container {
        border: 0 none;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 45px;
        align-content: center;

        .sw-media-field__input {
            padding: 2px 2px 2px 8px;
            background-color: $color-white;
            border: 1px solid $sw-media-field-border-color-input;
            border-radius: $sw-media-field-border-radius-input 0 0 $sw-media-field-border-radius-input;
        }

        .sw-media-base-item.is--list {
            padding: 0;
            margin: 0;
        }

        .mt-button--square {
            border-radius: 0 $sw-media-field-border-radius-input $sw-media-field-border-radius-input 0;
            border: 1px solid $sw-media-field-border-color-input;
            border-left: 0 none;
            width: 45px;
            height: 45px;
        }

        &.is--active .sw-media-field__input {
            border: 1px solid $sw-media-field-border-color-input-active;
        }
    }

    .sw-media-field__empty-preview {
        background: $transparent-background-url;
    }

    &__popover {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

.sw-media-field__expanded-content {
    width: 380px;
    padding: 30px;
    background-color: $sw-media-field-background-color-picker;
    border: 1px solid $sw-media-field-border-color-picker;
    border-radius: $sw-media-field-border-radius-picker;
    transform: translate(calc(-100% + 45px), 6px);

    .sw-simple-search-field {
        margin-bottom: 8px;
    }

    .sw-media-field__suggestion-list {
        list-style: none;

        > .sw-media-field__suggestion-list-entry:hover {
            cursor: pointer;
            background: $sw-media-field-background-color-list-item-hover;
        }
    }

    .sw-loader__container {
        transform: translate(-50%, 0%);
    }

    &::before {
        content: "";
        position: absolute;
        top: -5px;
        right: 20px;
        height: 8px;
        width: 8px;
        transform: rotate(45deg);
        background: $color-white;
        border-top: 1px solid $sw-media-field-border-color-picker;
        border-left: 1px solid $sw-media-field-border-color-picker;
        z-index: $z-index-context-menu;
    }

    .sw-media-field__actions_bar {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-column-gap: 8px;
        margin-bottom: 22px;
    }

    .sw-media-field__action-button {
        border: none;
        background: none;
        padding: 0;
        color: $sw-media-field-color-picker-toggle;
        justify-self: start;

        &.is--remove {
            color: $sw-media-field-color-unlink;
            justify-self: end;
        }
    }

    .sw-media-field__icon-add {
        color: $sw-media-field-color-picker-toggle;
    }

    .sw-media-field__icon-remove {
        color: $sw-media-field-color-unlink;
    }

    .sw-media-field__picker-loader {
        position: static;
    }

    .sw-pagination {
        border: none;
    }
}

.sw-popover__wrapper.sw-media-field__expanded-content.--placement-bottom-outside {
    transform: translate(calc(-100% + 45px), calc(-100% - 50px));

    &::before {
        top: auto;
        bottom: -5px;
        transform: rotate(225deg);
    }
}
